原生js实现Ajax

XMLHttpRequest对象

• 通过ActiveXObject实现（）

  • new ActiveXObject('Microsoft.XMLHTTP')
  • IE5是第一个引入XMLHttpRequest对象的浏览器；
  • IE5中,XHR对象是通过MSXML库中的一个ActiveX对象实现的；
  • IE中可能会遇到3种不同版本的XHR对象，即 MSXML2.XMLHttp.6.0, MSXML2.XMLHttp.3.0, MSXML2.XMLHttp；
  • 适用于IE7之前的版本

• 通过XMLHttpRequest构造函数

  • var xhr = new XMLHttpRequest();
  • IE7+、FireFox、Opera、Chrome和Safari都支持原生XMLHttpRequest对象；

生成XMLHttpRequest对象的方法

function createXHR() {
    if (typeof XMLHttpRequest !== 'undefined') {
        return new XMLHttpRequest();
    } else if (typeof ActiveXObject !== 'undefined'){
        // 支持IE7之前的版本
        if (typeof arguments.callee.activeXString !== 'string') {
            var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'];
            for (var i = 0; i < versions.length; i++) {
                try {
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                } catch (e) {
                    //
                }
            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    } else {
        throw new Error("No XHR Object available!");
    }
}

XHR对象的readyState属性

• readyState 表示请求/响应过程的当前活动阶段；
• readyState值变化将触发readystatechange事件，利用该事件检测每次状态变化后的readyState值；
• 通常只对readyState值为4的阶段感兴趣，此时所有数据已就绪；
• 为了确保跨浏览器兼容性，必须在调用open()之前指定readystatechange事件处理程序；

readyState属性取值：

值	阶段	说明
0	未初始化	还没有调用 open() 方法
1	启动	已调用 send() 方法，正在发送请求
2	发送	send() 方法完成，已收到全部响应内容
3	接收	正在解析响应内容
4	完成	响应内容解析完成，可以在客户端调用

XHR对象收到响应后添加的属性

属性	说明
responseText	作为响应主体被返回的文本；
responseXML	若响应内容类型是"text/xml"或"application/xml", 其值包含着响应数据的XML DOM文档； 对于非XML数据而言，responseXML值为null
status	响应的HTTP状态
statusText	HTTP状态的说明

封装AJAX方法

/**
 *
 * @param type 请求类型：get,post,...
 * @param url
 * @param dataObj 请求参数：对象字面量{key:value,...}
 * @param callback
 * @param async 是否异步
 */

function ajax(type, url, dataObj, callback, async) {
    var paramsStr = buildParamsStr(dataObj), xhr = null;
    if (type === 'get' && dataObj) {
        url = addURLParams(url, paramsStr);
    }
    xhr = createXHR();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            var status = xhr.status;
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                console.log(xhr.responseText);
                callback && callback(xhr.responseText);
            } else {
                console.log("请求异常！状态码：" + xhr.status);
            }
        }
    };
    xhr.open(type, url, async); // open()方法启动一个请求以备发送；
    if (type == 'get') {
        xhr.send(null);
    } else {
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
        xhr.send(paramsStr);
    }
}

encodeURIComponent()方法

• GET请求经常发生查询字符串格式引发的错误；
• 可以对查询字符串中每个参数的名称和值用encdoeURIComponent()进行编码；

function buildParamsStr(paramsObj){
    var str = '';
    for (key in paramsObj) {
        // 排除原型中属性
        if (dataObj.hasOwnProperty(key)) {
            // 对查询字符串中每个参数名称和值用encdoeURIComponent()进行编码
            str += "&" + encodeURIComponent(key) + "=" + encodeURIComponent(paramsObj[key]);
        }
    }
    return str.slice(1);
}

function addURLParams(url, paramsStr) {
    url += (url.indexOf('?') === -1) ? '?' : '&';
    url += paramsStr + '&' + new Date().getTime();
    return url;
}

---

调用示例

window.onload = function(){
    var btn = document.getElementById("btn1");
    btn.onclick = function(){
        ajax('get', 'a.txt', function fnSucc(str){
            alert(str)
        });
    }
}